<template>
  <div class="app-container">
    <div class="person-account">
      <el-form ref="branchForm" :model="branchForm" :rules="branchRules" label-width="150px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="真实姓名：" prop="realName">
              <el-input v-model="branchForm.realName" placeholder="请输入真实姓名" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="邀请码：" prop="parentCode">
              <el-input v-model="branchForm.parentCode" placeholder="请输入邀请码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="身份证正反面：" prop="agentIdCard">
              <image-upload v-model="branchForm.agentIdCard" :changeSize="true" :is-show-tip="false" width="50px"
                height="50px" :limit="2" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="上传证书：" prop="certificate">
              <image-upload v-model="branchForm.certificate" :changeSize="true" :is-show-tip="false" width="50px"
                height="50px" :limit="2" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上传合同：" prop="contract">
              <image-upload v-model="branchForm.contract" :changeSize="true" :is-show-tip="false" width="50px"
                height="50px" :limit="2" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="footer-button">
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { saveErpUser } from "@/api/distribution";

export default {
  name: "PersonAccount",
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  data() {
    return {
      // 表单校验
      branchRules: {
        realName: [{ required: true, message: "真实姓名不能为空", trigger: "blur" }],
        agentIdCard: [{ required: true, message: "请上传身份证照片", trigger: "change" }],
        // certificate: [{ message: "证书不能为空", trigger: "change" }],
        // contract: [{ message: "合同不能为空", trigger: "change" }]
      },
      branchForm: {
        realName: undefined,
        agentIdCard: undefined,
        contract: undefined,
        certificate: undefined,
        parentCode: undefined,
        orderNumber: undefined
      }
    };
  },
  created() {
    if (this.$route.params.id) this.branchForm.orderNumber = this.$route.params.id;
  },
  methods: {
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["branchForm"].validate(valid => {
        if (valid) {
          let cardIdList = this.branchForm.agentIdCard.split(';')
          if (cardIdList && cardIdList.length != 2) {
            this.$message.error('身份证照片数量不正确！')
            return
          }
          saveErpUser(this.branchForm).then(res => {
            this.branchForm = {
              realName: undefined,
              agentIdCard: undefined,
              contract: undefined,
              certificate: undefined,
              parentCode: undefined,
              orderNumber: undefined
            }
            this.$modal.msgSuccess(res.msg);
            this.$router.push(`/distribution1/recordPage`)
          });
        }
      });
    }
  }
};
</script>
<style lang="scss">
.person-account {
  width: 60%;
  padding: 20px 0;
}
.footer-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
}
</style>
